<!doctype html>
<html>
<head>
	<title>mofachi-妈妈的网上顾问</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Keywords" content="">
	<meta name="Description" content="">
<link type="text/css" href="css/jquery/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
function initEditor() {
	var setting	= {
		iconsPath: 'img/nicEditorIcons.gif',
		buttonList : ['bold','italic','underline','left','center','right','ol','ul','indent','outdent','html','image','removeformat'],
		maxHeight: 300
	};
	new nicEditor( setting ).panelInstance( 'content-text' );
}
function removeTag() {
	$( this ).parent().remove();
}
var tags = new Array();
$(document).ready( function() {
	$( "#submit" ).button();
	$( "#submit" ).click(function(){
		alert( "click me" );
	});




	initEditor();
	$( "#attr-tag-input" ).val( "在此输入标签，用空格分隔" );
	$( "#attr-tag-input" ).css( {color:'#999'} );
	$( "#attr-tag-input" ).focus( function() { $(this).val(""); $(this).css( {color:'#000'} );});
	
	$( "#attr-tag-input" ).keyup( function() {
		if( event.keyCode == 32 ) {
			var str = $( this ).val();
			if( str.trim() == "" ) {
				$( this ).val( "" );
				return;
			}
			$( "#attr-tag" ).append( "<div class='tag'>"+str+"<span class='close'>x</span></div>" );
			tags.push( str );
			$( "#attr-tag span:last" ).click( removeTag );
			$( this ).val( "" );
		}
	}).change();
	$( "#submit" ).click( function() {
		//alert( $( ".tag:visible" ).size() );
	});
});
</script>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", "黑体", sans-serif;
	background-color: #EEE;
}
#header {
	height: 80px;
	background-color: #99ccff;
	width: 100%;
}
#main {
/*
	height: 420px;
	*/
	width: 750px;
	margin: 30px auto 30px auto;
	padding: 20px 30px 30px 30px;
	border: 1px solid #CCC;
	background-color: #FFF;

	-webkit-border-top-right-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-khtml-border-top-left-radius: 10px;
	border-top-left-radius: 10px;

	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-khtml-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
#content-panel {
	float: left;
	padding: 0;
}
#content-logo {
	/*height: 30px;*/
	width: 450px;
	font-size: 1.5em;
	color: #3399cc;
}
#content-title {
	padding: 0;
	margin: 10px 0;
	border: 1px solid #999;
	width: 550px;
}
#content-title-input{
	border: 0;
	outline: none;
	font-size: 1em;
	width: 543px;
	margin: 3px 5px;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", "黑体", sans-serif;
}
#content {
	padding: 0;
	width: 550px;
}
#content-text {
	border: 0;
	outline: none;
	width: 550px;
	resize: none;
	outline: none;
}
#attr-panel {
/*
	margin-top: 79px;
	margin-left: 28px;
	*/
	float: right;
	width: 170px;
	padding: 0;
	border: 1px solid #999;
}
#footer {
	/*
	width: 810px;
	margin: 0 auto;
	border: 1px solid #999;
	*/
}
/* ---------------------------------------------------------------- */
#attr-tag-input {
	border: 0;
	width:  95%;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	font-size: 0.8em;
	outline: none;
	margin: 5px 3px 3px 3px;
}
#attr-tag {
	line-height: 22px;
	/*
	*/
	padding: 0 3px;
}
.tag {
	float: left;
	background-color: #3399cc;
	color: #FFF;
	padding: 0px 3px;
	margin: 3px 3px 0 0;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	font-size: 0.8em;
	height: 22px;
	vertical-align: top;
	cursor: pointer;
}
.close {
	padding: 0 3px;
	margin: 0;
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	color: black;
}
#is-open {
	float: right;
	width: 170px;
	padding: 0;
	border: 1px solid #999;
	margin: 0 0 10px 0;/*28px;*/
}
#is-open-select {
	width: 160px;
	margin: 5px;
	border: 0;
	outline: none;
}
table {
	/*
	border: solid 1px #CCC;
	*/
	border-collapse: collapse;
	table-layout: fixed;
	width: 750px;
}
table td {
	padding: 0;
	/*
	border: 1px solid #999;
	*/
	vertical-align: top;
}
table .m {
	width: 550px;
}
#submit {
/*
	border: 1px solid #999;
	background: #ccc;
	padding: 10px;
	margin: 5px;
	*/
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	font-weight: normal;
	margin-top: 10px;
	width: 120px;
	background: #33ccff;
	border: 0;
	color: #FFF;
}
</style>
</head>
<body>
<div id="header"></div>
<form action="" method="get">
<div id="main">
	<!-- div id="content-panel">
		<div id="content-logo"></div>
		<div id="content-title"><input type="text" id="content-title-input" name="title"/></div>
		<div id="content">
			<textarea id="content-text" cols="70" rows="20" name="ctnt"></textarea>
		</div>
		<input type="submit" value="发布"/>
	</div>
	<div id="attr-panel">
		<div id="attr-tag"></div>
		<div>
			<input type="text" id="attr-tag-input"/>
		</div>
	</div -->
<table>
<tr>
	<td class="m"><div id="content-logo">成长日记</div></td>
	<td></td>
</tr>
<tr>
	<td><div id="content-title"><input type="text" id="content-title-input" name="title"/></div></td>
	<td></td>
</tr>
<tr>
	<td>
		<div id="content">
			<textarea id="content-text" cols="70" rows="20" name="ctnt"></textarea>
		</div>
	</td>
	<td>
		<div id="is-open">
			<select id="is-open-select">
				<option value="1">所有人可见</option>
				<option value="0">只有自己可见</option>
			</select>
		</div>
		<div id="attr-panel">
			<div id="attr-tag"></div>
			<input type="text" id="attr-tag-input"/>
		</div>
	</td>
</tr>
<tr>
	<td style="text-align:right;"><input type="submit" id="submit" value="发布"></td>
	<td></td>
</tr>
</table>
</div>



</form>
<div id="footer"></div>
</body>
</html>
